<template>
	<div class="content">
		<div class="title">
			<div class="icon">
                <img src="https://pili-vod.guanxikeji.com/moban/img/1720144326934.png">
			</div>
			<div class="tg">
				热门·砍价
			</div>
			<div class="fg">|</div>
			<div class="num">已有<span style="color:#FF620C">1234</span>人参与砍价</div>
		</div>	
		<div class="goods">
			<div class="item">
                <div class="box">
                    <div class="img"></div>
                    <div class="dis">
                        <div class="t">小度智能音箱X6</div>
                        <div class="jg">￥309起</div>
                    </div>
                </div>
                <div class="tt">
                    已砍<span style="color:#FF620C">24.56</span>元，还差<span style="color:#FF620C">1234</span>元
                </div>
                <div class="poc">
                    <div class="poc2"></div>
                </div>
            </div>

		</div>
	</div>
</template>

<script>
export default {
	name: "poster",
	props: {
		type: {
			type: [String, Number],
			default: 1
		},
		list: {
			type: Array,
			default: () => []
		},

	},
	data() {
		return {

		};
	},
	created() {

	},
	methods: {
		
	}
}
</script>

<style lang="scss" scoped>
	.goods{
		margin-top:14px ;
		display: flex;
        .poc{
            width: 112px;
            height: 6px;
            background: #E4E6E7;
            border-radius: 3px 3px 3px 3px;
            margin-top: 10px;
        }
        .poc2{
            width: 112px;
            height: 6px;
            background: linear-gradient( 90deg, #FE2624 0%, #FFBB00 100%);
            border-radius: 3px 3px 3px 3px;
        }
        .tt{
            font-weight: 500;
            font-size: 11px;
            color: #000000;
            margin-top: 10px;
        }
		.item{
            width: 205px;
            height: 117px;
            background: #F6FCF9;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #FF0034;
            padding: 19px;
            margin-right:20px ;
            .dis{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .jg{
               font-weight: bold;
                font-size: 10px;
                color: #FF0034;
            }
            .t{
                font-weight: bold;
                font-size: 13px;
                color: #000000;
            }
            .box{
                display: flex;
            }
            .img{
                width: 39px;
                height: 39px;
                background: #E2C16E;
                border-radius: 7px 7px 7px 7px;
                margin-right: 9px;
            }
        }
	}
	.num{
		font-weight: 500;
		font-size: 12px;
		color: #909090;
	}
	.fg{
		// width: 0px;
		// height: 10px;
		// border: 1px solid #909090;
		// margin: 0 5px;
		margin: 0 5px;
	}
	.tg{
		font-size: 18px;
		margin-left: 4px;
		font-weight: bold;
	}
	.title{
		display: flex;
		align-items: center;
	}
	.icon{
			width: 23px;
            height: 23px;
            img{
                width: 23px;
            height: 23px;
            }
		}
	.content{
	    width: 374px;
        height: 175px;  
		padding: 11px 13px;
		background: linear-gradient( 180deg , #D9F1F9 ,#FFFFFF,#FFFFFF, #FFFFFF );
		box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.08);
		border-radius: 13px 13px 13px 13px;
		margin: 10px auto;
        overflow: hidden;

	}
</style>
